<template>
  <div>
    <!-- vue对事件有修饰符，可以给事件带来更多的功能 -->
    <!-- 语法：@事件名.修饰符="methods里函数" -->
    <!-- .stop - 阻止事件冒泡 -->
    <!-- .prevent - 阻止默认行为 -->
    <!-- .once - 程序运行期间，只触发一次事件处理函数 -->
    <!-- 补充：修饰符可以链式调用的，事件处理函数可以视情况不写。 -->
    <!-- 换句话说，没有必要单独写一个函数来阻止默认行为或是事件冒泡，只要用一个修饰符即可解决问题 -->
    <div @click="fatherFn">
      <button @click.stop="btn1">阻止事件冒泡</button>
      <a @click.prevent.stop href="https://www.google.com">Google</a>
      <button @click.once="btn2" @click.stop>程序运行期间只触发一次函数</button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fatherFn() {
      console.log("father事件触发");
    },
    btn1() {},
    btn2() {
      console.log("程序运行期间只触发一次的函数");
    },
  },
};
</script>

<style>
</style>

